<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-31 17:46:49
 * @LastEditTime: 2020-03-25 15:45:47
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../../script/vue.min.js"></script>
    <script type="text/javascript" src="../../script/vant.min.js"></script>
    <script type="text/javascript" src="../../script/fastclick.js"></script>
    <script type="text/javascript" src="../../script/base.js"></script>
    <script type="text/javascript" src="../../script/app-tree.js"></script>
    <style type="text/css">
        .van-search {
            /* background: transparent !important; */
            padding: 6px 0;
            /* border-bottom: 1px solid #ebedf0; */
        }

        /* .van-search__content {
              background: transparent
          } */

        .van-search__action {
            color: #cd1b21;
            font-size: 13px;
            font-weight: 700;
        }

        .result {
            position: absolute;
            left: 0;
            top: 47px;
            bottom: 0;
            right: 0;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .mt {
            margin-top: 10px;
        }

        .border {
            border-right: 1px solid #ebedf0;
        }

        .label {
            line-height: 22px;
            text-align: center;
            font-weight: 500;
            font-size: 13px;
            color: #969799;
            padding: 8px 0;
        }

        .label .label-value {
            color: #3a3a3a;
            font-size: 14px;
        }

        .van-panel__header-value {
            color: #969799;
        }

        .oun {
            color: #969799;
        }

        .un {
            color: #cd1b21;
        }

        .van-cell__title {
            max-width: 90%;
        }

        .van-cell__value {
            text-align: right;
        }

        .tab {
            overflow: hidden;
            position: absolute;
            left: 0;
            top: 0;
            width: 130px;
            padding-left: 10px;
            height: 47px;
            line-height: 55px;
            background: rgb(255, 255, 255);
            border-bottom: 1px solid #ebedf0;
        }

        .tab .t-d {
            font-size: 0;
            border-radius: 6px;
        }

        .tab .t-d>div {
            display: inline-block;
            width: 55px;
            text-align: center;
            height: 24px;
            font-size: 13px;
            border: 1px solid #cd1b21;
            line-height: 22px;
        }

        .tab .t-d>div.on {
            background: #cd1b21;
            color: #fff;
            line-height: 22px;
        }

        .total {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 50px;
            width: 100%;
            padding: 0 15px;
            line-height: 50px;
            font-size: 14px;
            background: #fff;
            box-shadow: 0 0 5px rgb(200, 198, 198);
        }

        .money {
            font-size: 16px;
            font-weight: 700;
            color: #cd1b21;
            margin-left: 15px;
        }

        .elp {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 200px;
        }

        .t {
            /* background: #fff; */
            padding-top: 15px;
            height: 100%;
        }

        .t>div {
            overflow-y: auto;
            height: 100%;
            font-size: 14px;

        }

        .t-1 {
            padding: 5px 0 10px 10px;
        }

        .t-2 {
            padding: 5px 0 0 10px;
            border-left: 1px solid #ebedf0;
        }

        .t-3 {
            padding: 5px 0 0 10px;
        }

        .bt {
            border-bottom: 1px dashed #ebedf0;
        }

        .t-3>div {
            padding: 5px 0;
            border-bottom: 1px dashed #ebedf0;
        }

        .text-1 {
            padding-bottom: 5px;
            color: #1989fa;
            font-weight: 700;
        }

        .location {
            float: left;
            width: 75px;
            /* text-align: center; */
            padding: 10px 0 10px 5px;
            /* line-height: 50px; */
        }
        .s{
            float: left;
            width:calc(100% - 75px);
        }
        .van-popup--left{
            top: 0;
            transform: none;
            bottom: 0;
        }


        .tree {
			height: 100%;
			overflow-y: auto;
			font-size: 14px;
			box-shadow: 0 0px 12px #ebedf0;
			padding: 10px 0 10px 0;
			transition: all 0.4s;
			z-index: 999;
			padding-left: 5px;
            padding-right: 10px;
		}

		.tree ul {
			padding-left: 13px;
			transition: all 0.4s;
			position: relative;
			/* overflow: hidden; */
		}

		.tree .tree-node {
			overflow: hidden;
			position: relative;
		}

		.tree ul li {
			position: relative;
		}


		.tree-row {
			position: relative;
		}




		.tree-row.on {
			color: #469ede;
		}

		.tree-row>* {
			vertical-align: middle;
		}

		.tree-row i {
			margin-left: -14px;
			transition: all 0.4s;
		}

		.tree-row span {
			margin-left: 4px;
		}

		.tree-row .tran {
			transform: rotate(90deg);
		}
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">
            <van-nav-bar class="head" title="商城客户列表" left-arrow @click-left="onClickLeft">
            </van-nav-bar>
            <div class="body-no-bottom">
                <div class="content">
                    <div style="position: relative;background: #fff;overflow: hidden;">
                        <div class="location" @click="showTree = true" v-show="isRole">
                            <van-icon name="location" size="18px" color="#9e9e9e" style="vertical-align: middle;">
                            </van-icon><span
                                style="font-size: 12px;color: #9e9e9e;margin-left: 5px;">{{filterData.RegionName}}</span>
                        </div>
                        <div :class="isRole?'.s':''" style="background: #fff;">
                            <form action="" style="background: #fff;">
                                <van-search v-model="filterData.keyword" placeholder="请输入搜索关键词" show-action
                                    @search="getSearchList_b">
                                    <div slot="action" @click="getSearchList_b">查询</div>
                                </van-search>
                            </form>
                        </div>

                    </div>
                    <div class="result">
                        <div>
                            <van-panel class="mt" v-for="(row,index) in filterResult" @click="intoDetail(row,index)">
                                <div slot="header">
                                    <van-cell>
                                        <div style="text-align: left;">{{row.UserName}}</div>
                                    </van-cell>
                                </div>
                                <div class="label">
                                    <van-row gutter="8">
                                        <van-col span="8">
                                            <div>修理厂</div>
                                            <div class="label-value">{{row.ClientName}}</div>
                                        </van-col>
                                        <van-col span="8">
                                            <div>联系人</div>
                                            <div class="label-value">{{row.LinkName || '--'}}</div>
                                        </van-col>
                                        <van-col span="8">
                                            <div>联系方式</div>
                                            <div class="label-value">{{row.LinkTelphone || '--'}}</div>
                                        </van-col>

                                    </van-row>
                                </div>
                                <div slot="footer" style="text-align: right">
                                    <van-button size="small" type="default" @click.stop="openGoodsShelves(row)">货架查询
                                    </van-button>
                                    <van-button size="small" type="default" @click.stop="openCart(row)">购物车
                                    </van-button>
                                    <van-button size="small" type="primary" @click.stop="setOrderForOther(row)">代下单
                                    </van-button>
                                </div>
                            </van-panel>

                        </div>

                    </div>
                </div>
                <van-loading v-if="showLoading" />


            </div>



        </div>

        <!-- <div class="tree" :style="{top:topValue + 'px'}" v-show="showTree"> -->

        <van-popup v-model="showTree" position="left"
            :style="{ background:'#f7f8fa','top':topValue + 'px'}"
            :overlay-style="{ background:'rgba(0,0,0,0)' }">
            <!-- <div class="t">
                <div>
                    <div class="t-1" v-for="row1 in treeData">
                        <div :class="!row1.node.length?'bt':''" @click="selectTree(row1)">
                            <span :class="row1.RegionId == filterData.RegionId?'text-1':''">{{row1.RegionName}}</span>
                        </div>
                        <div class="t-2" v-for="row2 in row1.node">
                            <div :class="!row2.node.length?'bt':''" @click="selectTree(row2)">
                                <span
                                    :class="row2.RegionId == filterData.RegionId?'text-1':''">{{row2.RegionName}}</span>
                            </div>
                            <div class="t-3" v-for="row3 in row2.node">
                                <div @click="selectTree(row3)">
                                    <span
                                        :class="row3.RegionId == filterData.RegionId?'text-1':''">{{row3.RegionName}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->
            
            <app-tree :tree="treeData" :rowheight="32" @tree-click="selectTree"></app-tree>
        </van-popup>
        <!-- </div> -->


    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();

        api.addEventListener({
            name: 'setCustomerListData'
        }, function (ret, err) {
            vm.$set(vm.filterResult, vm.index, ret.value.userData)

        })

        var userInfo = FLD.getUserInfo();
        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                ifConfirm: false,
                filterData: {
                    keyword: '',
                    RegionId: 0,
                    RegionName: ''
                },
                filterResult: [],
                index: -1,
                showTree: false,
                treeData: [],
                topValue: 0,
                isRole:false
            },
            created: function () {
                var that = this;
                that.getTree();
                that.topValue = 40 + api.safeArea.top;
            },
            methods: {
                openGoodsShelves(row) {
                    api.openWin({
                        name: 'goodsShelves_shopping',
                        url: '../goodsShelves_shopping.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            clientInfo: row
                        }
                    })
                },
                getTree() {
                    var that = this;
                    that.showLoading = true;
                    $('.result').scrollTop(0);

                    FLD.ajax('sp_getRegionClient', {}, function (res) {
                        if (res.ds.length) {

                            for(var i in res.ds){
                                res.ds[i].id = res.ds[i].RegionId;
                                res.ds[i].label = res.ds[i].RegionName;
                            }


                            that.isRole = true;

                            that.getSearchList(res.ds[0].RegionId, res.ds[0].RegionName);

                            var repeatData = function (row) {
                                var d_data = [];
                                for (var i in res.ds) {
                                    if (row.RegionId == res.ds[i].ParentRegionId) {
                                        d_data.push(repeatData(res.ds[i]))
                                    }
                                }
                                row.node = d_data;
                                return row;
                            }

                            var data = [];
                            for (var i in res.ds) {
                                var x = 0;
                                var y = 0
                                var d_data = [];
                                for (var j in res.ds) {
                                    if (res.ds[i].RegionId == res.ds[j].ParentRegionId) {
                                        x = 1;
                                        d_data.push(repeatData(res.ds[j]))
                                    }
                                    if (res.ds[i].ParentRegionId == res.ds[j].RegionId) {
                                        y = 1;
                                    }
                                }

                                res.ds[i].node = d_data;
                                if (x == 1 && y == 0) {
                                    data.push(res.ds[i]);
                                }

                            }

                            that.treeData = data;

                        }else{
                            that.showLoading = false;
                            that.isRole = false;
                        }


                    })
                },
                getSearchList_b(){
                    var that = this;
                    that.getSearchList();
                },
                getSearchList(RegionId, RegionName) {
                    var that = this;
                    that.showLoading = true;
                    $('.result').scrollTop(0);
                    if (RegionId) {
                        that.filterData.RegionId = RegionId;
                        that.filterData.RegionName = RegionName;
                    }
                    FLD.ajax('sp_searchClientUserByArea', that.filterData, function (res) {
                        that.showLoading = false;
                        that.filterResult = res.ds;

                    })
                },
                selectTree(row,index) {
                    var that = this;
                    that.filterData.RegionId = row.RegionId;
                    that.filterData.RegionName = row.RegionName;
                    if(index == 1){
                        that.showTree = false;
                    }
                    
                    that.getSearchList();
                },
                openCart(row) {
                    var that = this;
                    api.openWin({
                        name: 'shoppingCart',
                        url: 'shoppingCart.html',
                        reload: true,
                        slidBackEnabled: false,
                        allowEdit: false,
                        pageParam: {
                            h_userId: row.UserId
                        }
                    })
                },
                setOrderForOther(row) {
                    var that = this;
                    api.openWin({
                        name: 'setOrderForOther',
                        url: 'setOrderForOther.html',
                        reload: true,
                        slidBackEnabled: false,
                        allowEdit: false,
                        pageParam: {
                            h_userId: row.UserId
                        }
                    })
                },
                intoDetail(row, index) {
                    var that = this;
                    that.index = index
                    api.openWin({
                        name: 'shoppingUserDetail',
                        url: 'shoppingUserDetail.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            userData: row
                        }
                    })
                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>